<template>
  <div class="container">
    <el-row :gutter="32">
      <el-col :span="12">
        <el-card>
          <div style="width: 100%; height: 600px" id="echarts_map"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import gaotang from './gaotang.json'
import diejia from '../../assets/11b870a548b3578319bae9d7ccfeecc.png'
export default {
  data() {
    return {
    };
  },
  mounted() {
    this.initEchart()
  },
  methods: {
    initEchart() {
      var myChart = echarts.init(document.getElementById('echarts_map'))
      echarts.registerMap("高唐县", gaotang);
      var cityName = [
        {name: '鱼邱湖街道', value: [116.258999,36.86188]},
        {name: '尹集镇',value: [116.331295,36.907576]},
        {name: '人和街道',value: [116.284091,36.880083]},
        {name: '杨屯镇',value: [116.343987,36.83157]},
        {name: '固河镇',value: [116.418636,36.911548]},
        {name: '琉璃寺镇',value: [116.346405,36.720159]},
        {name: '汇鑫街道',value: [116.176409,36.87659]},
        {name: '三十里铺镇',value: [116.095635,36.858881]},
        {name: '梁村镇',value: [116.248754,36.976695]},
        {name: '赵寨子镇',value: [116.172351,36.79003]},
        {name: '姜店镇',value: [116.251023,36.810345]},
        {name: '清平镇',value: [116.088251,36.763016]},
      ]
      myChart.setOption({
        geo: [
          {
            map: '高唐县',
            zoom: 1, // 当前视角的缩放比例
            aspectScale: 0.85,
            layoutCenter: ['50%', '50%'], // 地图位置
            layoutSize: '100%',
            roam: false,  hoverAnimation: false, // 移除hover动画
            itemStyle: {
              normal: {
                borderColor: 'rgba(147, 235, 248, 1)',
                borderWidth: 1,
                shadowColor: 'rgba(128, 217, 248, 1)',
                shadowOffsetX: 0,
                shadowOffsetY: 15,
                shadowBlur: 10,
              },
              emphasis: {
                areaColor: '#389BB7',
                borderWidth: 0,
              },
            },
          },
        ],
        series: [{
          name: "报警点位",
          type: "scatter",
          coordinateSystem: "geo",
          hoverAnimation: false, // 移除hover动画
          label: {
            show: true,
            position:  ['55%', '28%'],
            color: "#000",
            areaColor: 'red', // 移入时区域高亮颜色
            formatter(params) {
              return params.name;
            }
          },
          data: cityName,
          itemStyle: {
            normal: {    show: true, // 显示标签
              color: 'red', // 点的默认颜色
              areaColor: 'red' // 移入时区域高亮颜色
            },
            emphasis: {    show: true, // 显示标签
              borderColor: '#fff', // 移入时点的边框颜色
              borderWidth: 2, // 移入时点的边框宽度
              areaColor: 'red' // 移入时区域高亮颜色
              
            }
          },
          emphasis: {
            label: {
              show: true, // 显示标签
              color: 'red', // 标签颜色
              areaColor: 'red' // 移入时区域高亮颜色  
            },
            itemStyle: {
              areaColor: 'red' // 移入时区域高亮颜色
            }
          }
        }]
      });
    }
  },
};
</script>

<style scoped>

</style>
